<template>
	<view>
		<keep-alive exclude="Detail,SearchPage,ConfirmOrder,Login,Register,Setting,Address,OrderDetail">
			<router-view ref="view"></router-view>
		</keep-alive>

		<tab-bar>
			<tab-bar-item @click="toHome">
				<image slot="item-icon" src="../../../static/img/tabbar/home.svg" alt="主页" />
				<image slot="item-icon-active" src="../../../static/img/tabbar/home_active.svg" alt="主页" />

				<view slot="item-text">主页</view>
			</tab-bar-item>

			<tab-bar-item @click="toCategory">
				<image slot="item-icon" src="../../../static/img/tabbar/category.svg" alt="分类" />
				<image slot="item-icon-active" src="../../../static/img/tabbar/category_active.svg" alt="分类" />

				<view slot="item-text">分类</view>
			</tab-bar-item>

			<tab-bar-item @click="toCart">
				<view class="cart" slot="item-icon">
					<el-badge :value="goodsNum" :max="99" class="item">
						<image src="../../../static/img/tabbar/cart.svg" alt="购物车" />
					</el-badge>
				</view>

				<view class="cart" slot="item-icon-active">
					<el-badge :value="goodsNum" :max="99" class="item">
						<image class="image" src="../../../static/img/tabbar/cart_active.svg" alt="购物车" />
					</el-badge>
				</view>

				<view slot="item-text">购物车</view>
			</tab-bar-item>

			<tab-bar-item @click="toMy">
				<image class="image" slot="item-icon" src="../../../static/img/tabbar/my.svg" alt="我的" />
				<image class="image" slot="item-icon-active" src="../../../static/img/tabbar/my_active.svg" alt="我的" />

				<view slot="item-text">我的</view>
			</tab-bar-item>
		</tab-bar>
	</view>
</template>

<script>
	import TabBar from "../../common/TabBar/TabBar";
	import TabBarItem from "../../common/TabBar/TabBarItem";
	import {
		mapState
	} from "vuex";
	export default {
		name: "MainTabBar",
		components: {
			TabBarItem,
			TabBar,
		},
		data() {
			return {
				pathList: ["My", "Home", "Cart", "Category"],
				main: false,
			};
		},
		watch: {
			"$route.path"(newV) {

				console.log('$route.path', newV);
				this.main = this.pathList.includes(newV.slice(1, -1));
				console.log(this.main, 'this.main')
			},
		},
		computed: {
			...mapState(["goodsNum"]),
		},
		methods: {
			toHome() {
				uni.switchTab({
					url: "@/pages/home/Home"
				})
			},
			toCategory() {
				uni.switchTab({
					url: "@/pages/category/Category"
				})
			},
			toCart() {
				uni.switchTab({
					url: "@/pages/cart/Cart"
				})
			},
		},
		created() {
			console.log(this.main, this.$route)
		}
	};
</script>

<style lang="scss" scoped>
	.item {
		position: relative;
	}

	.cart {
		position: relative;
		height: 3.5vh;
	}

	.image {
		width: 3.5vh;
	}
</style>
